<template>
  <div class="common-table-operations-component">
    <div class="left-actions">
      <span v-if="hasSelected" class="selected-count">
        {{ $t('common.selectedItems', { count: selectedCount }) }}
      </span>
      <div class="action-buttons">
        <a-button type="primary" @click="$emit('add')">
          <template #icon><PlusOutlined /></template>{{ $t('role.add') }}
        </a-button>
        <a-button type="primary" danger :disabled="!hasSelected" @click="$emit('batch-delete')">
          <template #icon><DeleteOutlined /></template>{{ $t('common.batchDelete') }}
        </a-button>
        <a-button @click="$emit('refresh')">
          <template #icon><ReloadOutlined /></template>{{ $t('common.refresh') }}
        </a-button>
      </div>
    </div>
    <div class="right-actions">
      <a-space>
        <a-button type="primary" @click="$emit('search')">
          <template #icon><SearchOutlined /></template>{{ $t('common.search') }}
        </a-button>
        <a-button @click="$emit('reset')">
          <template #icon><ReloadOutlined /></template>{{ $t('common.reset') }}
        </a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'TableOperations'
})

withDefaults(defineProps<{
  selectedCount?: number
  hasSelected?: boolean
}>(), {
  selectedCount: 0,
  hasSelected: false
})

// Emits定义
const emit = defineEmits(['search', 'reset', 'add', 'batch-delete', 'refresh'])
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 